<h3>{{title}}</h3>

<div>
  {{i18n 'admin.dashboard.reports.start_date'}} {{input type="date" value=startDate}}
  {{i18n 'admin.dashboard.reports.end_date'}} {{input type="date" value=endDate}}
  {{d-button action="refreshReport" class="btn-primary" label="admin.dashboard.reports.refresh_report" icon="refresh"}}
</div>

<div class='view-options'>
  {{#if viewingTable}}
    {{i18n 'admin.dashboard.reports.view_table'}}
  {{else}}
    <a href {{action "viewAsTable"}}>{{i18n 'admin.dashboard.reports.view_table'}}</a>
  {{/if}}
  |
  {{#if viewingBarChart}}
    {{i18n 'admin.dashboard.reports.view_chart'}}
  {{else}}
    <a href {{action "viewAsBarChart"}}>{{i18n 'admin.dashboard.reports.view_chart'}}</a>
  {{/if}}
</div>

{{#conditional-loading-spinner condition=refreshing}}
  <table class='table report'>
    <tr>
      <th>{{xaxis}}</th>
      <th>{{yaxis}}</th>
    </tr>

    {{#each row in dataReversed}}
      <tr>
        <td>{{row.x}}</td>
        <td>
          {{#if viewingTable}}
            {{row.y}}
          {{/if}}
          {{#if viewingBarChart}}
            <div class='bar-container'>
              <div class='bar' style="width: {{unbound row.percentage}}%">{{row.y}}</div>
            </div>
          {{/if}}
        </td>
      </tr>
    {{/each}}
  </table>
{{/conditional-loading-spinner}}
